<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        body {
            font-size: 13px;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        table,
        th,
        td {
            border: 1px solid #333;
        }

        table {
            width: 1226px;
            table-layout: fixed;
            margin: 50px auto;
            border-collapse: collapse;
            line-height: 40px;
            text-align: center;
        }

        table input {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 列表渲染 -->
        <table>
            <tr>
                <th v-for="item in title">{{item}}</th>
            </tr>
            <!-- item.chinese 虽然写起来比较麻烦,修改数据时改的是源数据  -> 视图也会更新-->
            <tr v-for="item in grade">
                <td>{{item.name}}</td>
                <td>{{item.class}}</td>
                <td>
                    <template v-if="item.isEdit==false">{{item.chinese}}</template>
                    <template v-else><input type="text" v-model.number.lazy="item.chinese"></template>
                </td>
                <td>
                    <template v-if="item.isEdit==false">{{item.math}}</template>
                    <template v-else><input type="text" v-model.number.lazy="item.math"></template>
                </td>
                <td>
                    <template v-if="item.isEdit==false">{{item.english}}</template>
                    <template v-else><input type="text" v-model.number.lazy="item.english"></template>
                </td>
                <td>{{item.chinese + item.math + item.english}}</td>
                <td>
                    <!-- isEdit==true => 正处于编辑状态,span内的文本应该是保存 -->
                    <!-- isEdit==false =>正处于未编辑状态,span内的文本应该是编辑(可编辑)-->
                    <a href="" @click.prevent="editHandler(item)">
                        {{item.isEdit==true ? '保存': '编辑'}}
                    </a>
                    <a href="">删除</a>
                </td>
            </tr>
        </table>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],
            obj: { name: "张三", age: 18, height: "177cm", weight: "70kg" },
            title: ["姓名", "班级", "语文", "数学", "英语", "总分", "操作"],
            grade: [],
        },
        methods: {
            getData() {
                setTimeout(() => {
                    var res = [{
                        name: "张三",
                        class: "2302",
                        chinese: 55,
                        math: 66,
                        english: 77,
                        // isEdit:false,
                    }, {
                        name: "李四",
                        class: "2302",
                        chinese: 76,
                        math: 69,
                        english: 91,
                        // isEdit:false,
                    }, {
                        name: "王五",
                        class: "2302",
                        chinese: 82,
                        math: 49,
                        english: 72,
                        // isEdit:false,
                    }]
                    // 给data中已有的数据(data)新增属性
                    res.forEach(v => Vue.set(v, "isEdit", false))
                    this.grade = res;
                }, 2000)
            },
            editHandler(item){
                // 每一个数据都可以变为编辑状态
                // item.isEdit = !item.isEdit;

                this.grade.forEach(v=>v.isEdit = false);
                item.isEdit = !item.isEdit;
            }
        },
        mounted() {
            this.getData();
        },
    });

</script>

</html>